import React from 'react';

interface Contact {
  id: string;
  name: string;
  pinyin: string;
  avatarColor: string;
}

interface ContactsListProps {
  searchQuery: string;
}

const contacts: Contact[] = [
  { id: 'l1', name: '李军义浦大', pinyin: 'L', avatarColor: 'bg-blue-50 text-blue-600' },
  { id: 'l2', name: '李天兵', pinyin: 'L', avatarColor: 'bg-pink-50 text-pink-600' },
  { id: 'l3', name: '吕亚军', pinyin: 'L', avatarColor: 'bg-purple-50 text-purple-600' },
  { id: 'm1', name: '马永刚', pinyin: 'M', avatarColor: 'bg-yellow-50 text-yellow-600' },
  { id: 's1', name: '三叔', pinyin: 'S', avatarColor: 'bg-gray-50 text-gray-600' },
  { id: 't1', name: '唐唐', pinyin: 'T', avatarColor: 'bg-indigo-50 text-indigo-600' },
  { id: 'w1', name: '王五', pinyin: 'W', avatarColor: 'bg-green-50 text-green-600' }
];

const ContactsList: React.FC<ContactsListProps> = ({ searchQuery }) => {
  const filteredContacts = contacts.filter(contact => 
    contact.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    contact.pinyin.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const groupedContacts = filteredContacts.reduce((acc, contact) => {
    const firstLetter = contact.pinyin;
    if (!acc[firstLetter]) {
      acc[firstLetter] = [];
    }
    acc[firstLetter].push(contact);
    return acc;
  }, {} as Record<string, Contact[]>);

  const sortedLetters = Object.keys(groupedContacts).sort();

  if (filteredContacts.length === 0) {
    return (
      <div className="flex-1 flex items-center justify-center text-gray-500">
        未找到联系人
      </div>
    );
  }

  return (
    <div className="flex-1 overflow-y-auto">
      {sortedLetters.map(letter => (
        <div key={letter} className="relative">
          {/* Letter Index */}
          <div className="sticky top-0 px-4 py-2 text-sm font-medium text-gray-500 bg-white/95 backdrop-blur-sm z-10 border-b border-gray-100">
            {letter}
          </div>
          
          {/* Contact Items */}
          <div>
            {groupedContacts[letter].map(contact => (
              <div
                key={contact.id}
                className="flex items-center px-4 py-3 hover:bg-gray-50 transition-colors"
              >
                <div className={`w-10 h-10 rounded-full ${contact.avatarColor} flex items-center justify-center flex-shrink-0`}>
                  <span className="text-base font-medium">{contact.name[0]}</span>
                </div>
                <span className="ml-3 text-gray-800 text-base">{contact.name}</span>
              </div>
            ))}
          </div>
        </div>
      ))}

      {/* Alphabet Index */}
      <div className="fixed right-1 top-1/2 transform -translate-y-1/2 flex flex-col items-center justify-center text-xs font-medium text-gray-500 space-y-1">
        {sortedLetters.map(letter => (
          <button key={letter} className="w-4 h-4 flex items-center justify-center hover:text-blue-600">
            {letter}
          </button>
        ))}
      </div>
    </div>
  );
};

export default ContactsList;